
<template>
    <view :class="$style.page">
        <PageHeader :showSearch="false">
            <view class="PAGE_TITLE">一卡通查询</view>
        </PageHeader>

        <view class="p-l-r">
            <view :class="$style.statistics">
                <view :class="$style.total">
                    <view :class="$style.name">姓名</view>
                    <view :class="$style.num">{{ card.XM }}</view>
                </view>
                <view :class="$style.blank"></view>
                <view :class="$style.items">
                    <view :class="$style.item">
                        <view :class="$style.name">账户状态</view>
                        <view :class="$style.num">{{ card.ZHZT }}</view>
                    </view>
                    <view :class="$style.item">
                        <view :class="$style.name">余额(元)</view>
                        <view :class="$style.num">{{ card.KYE }}</view>
                    </view>
                </view>
            </view>
        </view>

        <view :class="$style.dates">
            <uni-datetime-picker v-model="range" type="daterange" :end="end" :clear-icon="false" @change="onChange" />
        </view>


        <view :class="$style.rows">
            <view :class="$style.row" v-for="(row, index) in dataRows" :key="index">
                <view :class="$style.item">
                    <view :class="$style.name">{{ row.XFQY }}</view>
                    <view :class="$style.amount">￥{{ row.XFJE }}</view>
                </view>
                <view class="m-t-10" :class="$style.item">
                    <view :class="$style.date">{{ row.XFSJ }}</view>
                    <view :class="$style.type">{{ row.XFDD }}</view>
                </view>
            </view>
        </view>

        <view>
            <LoadMore ref="loadMoreRef" :api="page" @finish="finish" :pageSize="2000" />
        </view>
    </view>
</template>
<script lang="ts" setup>
import PageHeader from '@/components/PageHeader.vue'
import { pageApi, cardApi } from '@/api/Card';
import { nextTick, ref, watch } from 'vue';
import LoadMore from '@/components/LoadMore.vue'
import { parseTime } from '@/utils';


function daysBetweenDates(dateStr1:string, dateStr2:string) {
    // 将日期字符串转换为Date对象
    const date1 = new Date(dateStr1);
    const date2 = new Date(dateStr2);

    // 计算时间差（毫秒）
    const diffMs = Math.abs(date2 - date1);

    // 将时间差转换为天数
    const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));

    return diffDays;
}



    const loading = ref(true)
    const dataRows = ref<any[]>([])
    const card = ref<any>({})

    const range = ref<string[]>([])
    const end = ref('')

    const loadMoreRef = ref()

    const currentDate = new Date();
    const sevenDaysBefore = new Date(currentDate);
    sevenDaysBefore.setDate(currentDate.getDate() - 7);


    range.value = [parseTime(sevenDaysBefore, '{y}-{m}-{d}'), parseTime(currentDate, '{y}-{m}-{d}')]
    end.value = range.value[1]


    watch(range, (a, b) => {

        if(daysBetweenDates(a[0], a[1]) > 7) {
            
            nextTick(() => {
                range.value = [...b]
            })
        }
    })


    function onChange(e) {
        if(daysBetweenDates(e[0], e[1]) > 7) {
            uni.showModal({
                content : '查询范围不能超过7天，查询更大范围消费记录请在PC端访问一站式服务大厅',
                showCancel : false,
                confirmText :'确定'
            })

            return
        }

        dataRows.value.splice(0)
        loadMoreRef.value.reload()
    }


    function page(params) {
        var end = new Date(range.value[1])
        end.setDate(end.getDate() + 1);
        return pageApi({...params, start : range.value[0], end : parseTime(end, '{y}-{m}-{d}')})
    }



    function finish(rows) {
        rows.reverse()
        dataRows.value.push(...rows)
    }


    cardApi().then(res => {
        if(res.success && res.data) {
            card.value = res.data
        }
    })

</script>


<style lang="scss" src="./index.scss" module>
</style>